<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
  <script type="text/javascript" src="../vue.min.js"></script>

  <script type="text/javascript" src="../axios.min.js"></script>
</head>
<body>
<div id="app">
  书名<input v-model="name">
  出版社<input v-model="press">
  出版日期<input v-model="date">
  <button @click="query">查看</button>
  <table style=""width="100%" border="0">
    <tr>
      <th>编号</th>
      <th>书名</th>
      <th>出版社</th>
      <th>出版日期</th>
      <th>作者</th>
      <th>库存</th>
      <th>图片</th>
    </tr>
    <tr v-for="book in list" >
      <th>{{book.id}}</th>
      <th>{{book.bookname}}</th>
      <th>{{book.bookpress}}</th>
      <th>{{book.pressdate}}</th>
      <th>{{book.bookauthor}}</th>
      <th>{{book.bookcount}}</th>
      <th><img :src="book.bookimage" height="100px"></th>
    </tr>
  </table>
</div>
<script type="text/javascript">
  var vue = new Vue({
    el : "#app",
    data : {
      data : {
        list :[],
        name : "",
        press : "",
        date : "",
      },
      created : function() {

          axios({
            method : 'post',
            url : "../../QueryBookServlet",
            date : {
              name : this.name,
              press : this.press,
              date : this.date,
            }
          }).then((res) => {
            this.list = res.data;
          });
        }
      }

  });
</script>

</body>
</html>